<!-- 导航栏 -->
<style>
  .header-nav.active {
    color: #FFB300 !important;
  }
</style>
<nav class="bg-white shadow-sm ">
  <div class="container mx-auto px-4">
    <div class="flex justify-between xl:justify-start items-center h-14 md:h-16 py-1 md:py-2 box-content">
      <div class="text-xl font-bold mr-16">
        <a href="/" title="{dreamer-cms:global name=" title"/}">
          <img src="{dreamer-cms:template /}images/logo.png" title="{dreamer-cms:global name=" title"/}"
            alt="{dreamer-cms:global name=" title"/}" class="h-9 md:11" alt="logo">
        </a>
      </div>
      <div class="hidden xl:flex text-lg text-[#262626]">
        {dreamer-cms:categoryartlist length="10"}
        {dreamer-cms:if test="('true' eq [field:haschildren/])"}
        <div
          class="header-nav relative group z-50 w-32 h-12 border-b border-dashed border-white/20 flex items-center justify-center hover:bg-[rgba(70,70,70,0.9)] hover:text-[#FFB300]">

          <a typeurl="[field:visiturl /]" class="yiji group-hover:font-bold">[field:typenamecn /]</a>
          <div
            class="absolute top-12 hidden group-hover:block w-32 backdrop-blur-sm overflow-hidden transition-all duration-800 opacity-0 group-hover:opacity-100 bg-[rgba(70,70,70,0.9)]">
            {dreamer-cms:channel}
            <a href="[field:typeurl /]" 
              class="h-[37px] flex items-center justify-center border-b border-dashed border-white/20 hover:bg-white/10 text-[#FFB300]">
              [field:typenamecn /]
            </a>
            {/dreamer-cms:channel}

          </div>

        </div>
        {/dreamer-cms:if}
        {dreamer-cms:if test="('false' eq [field:haschildren/])"}
        <div
          class="header-nav relative group z-50 w-32 h-12 border-b border-dashed border-white/20 flex items-center justify-center hover:text-[#FFB300] ">
          <a href="[field:typeurl /]"  typeurl="[field:typeurl /]"
            class="yiji">[field:typenamecn /]</a>
        </div>
        {/dreamer-cms:if}

        {/dreamer-cms:categoryartlist}

      </div>
      <button class="xl:hidden" id="menu-btn">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>
<!-- 移动端菜单 -->
<div class="hidden xl:hidden bg-white" id="mobile-menu">
  <div class="container mx-auto px-4 py-3 space-y-3">
    {dreamer-cms:categoryartlist length="10"}
    {dreamer-cms:if test="('true' eq [field:haschildren/])"}
    <div class="relative group">
      <a 
        class="block text-gray-600 hover:text-[#FFB300]">[field:typenamecn /]</a>
      <div class="pl-4 mt-2 space-y-2 hidden group-hover:block">
        {dreamer-cms:channel}
        <a href="[field:typeurl /]" 
          class="block text-gray-600 hover:text-[#FFB300]">[field:typenamecn /]</a>
        {/dreamer-cms:channel}
      </div>
    </div>
    {/dreamer-cms:if}
    {dreamer-cms:if test="('false' eq [field:haschildren/])"}
    <a href="[field:typeurl /]" class="block text-gray-600 hover:text-[#FFB300]">[field:typenamecn /]</a>
    {/dreamer-cms:if}
    {/dreamer-cms:categoryartlist}
  </div>
</div>

<p id="visiturl" class="hidden">{dreamer-cms:topcategory field="visiturl" /}</p>
<script>
  // 移动端菜单切换
  window.onload = function () {
    const menuBtn = document.getElementById('menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');

    if (menuBtn && mobileMenu) {
      menuBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        mobileMenu.classList.toggle('hidden');
      });

      // 点击页面其他区域关闭菜单
      document.addEventListener('click', function () {
        mobileMenu.classList.add('hidden');
      });

      // 阻止菜单区域点击事件冒泡
      mobileMenu.addEventListener('click', function (e) {
        e.stopPropagation();
      });
    }

    const visitUrlElement = document.getElementById('visiturl');
    if (visitUrlElement) {
      const visitUrl = visitUrlElement.textContent.trim();

      // 查找所有一级菜单链接
      const mainMenuLinks = document.querySelectorAll('.yiji');
      if (visitUrl.includes('dreamer-cms') || visitUrl.trim() === '/shouye') {
        mainMenuLinks[0].parentElement.classList.add('active');
        const url = mainMenuLinks[0].getAttribute('typeurl');
        mainMenuLinks[0].setAttribute('href', url);
        return
      }
      // 先移除所有一级菜单链接父元素的 active 类
      mainMenuLinks.forEach(link => {
        link.parentElement.classList.remove('active');
      });
      mainMenuLinks.forEach(link => {
        if (link.getAttribute('typeurl').includes(visitUrl.trim())) {
          // 当 visitUrl 不为 '/' 时，正常匹配
          link.parentElement.classList.add('active');
        }
      });
    }

    const links = document.querySelectorAll('a.yiji[typeurl]');
    links.forEach(link => {
      if (link.textContent.trim() === '首页') {
        const url = link.getAttribute('typeurl');
        link.setAttribute('href', url);
      }
    });
  };

</script>